﻿@{
    ViewBag.Title = "Office Self Service";
}

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>SelfService</title>
    <meta charset="utf-8" name="viewport" content="width=device-width"/>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0.1/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0.1/fabric.components.min.css">
</head>
<body style="overflow: hidden;">

    <div class="ms-Grid ms-bgColor-themePrimary banner">
        <div id="topBar" class="ms-Grid-row">
            <div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12 ms-u-xl12">
                <img class="ms-fontColor-white companyLogo hidden" />
                <span class="ms-font-xl ms-fontColor-white companyName" style="font-weight: bold;">
                    CompanyLogo/Name
                </span>
                <span class="ms-font-xl banner-label ms-fontColor-white" style="font-weight: bold;">Office Self Service Deployment</span>
                <span id="btAbout" class="ms-font-xl ms-fontColor-white ms-Icon ms-Icon--question helpButton" onclick="showModal('helpModal')"></span>
            </div>
        </div>
    </div>

    <div id="banner" class="ms-Grid custom-banner">
        <div class="ms-Grid-row">
            <div class="ms-Grid-col ms-u-sm12 ms-u-md10 ms-u-lg6 ms-u-xl-6">
                <div class="banner-text">
                    <div id="bannerTitle" class="ms-font-su"></div>
                    <div id="bannerText" class="ms-font-plus description">
                    </div>
                </div>
            </div>
            <div class="ms-Grid-col ms-u-sm4 ms-u-smPush0 ms-u-md5 ms-u-mdPush1 ms-u-lg2  ms-u-xl2 ms-u-xlPull1">
                <img src="~/Content/imgs/illustration.png" />
            </div>
            <div class="ms-Grid-col ms-u-sm2 ms-u-smPush5 ms-u-md1  ms-u-lg2 ms-u-lgPush2 ms-u-xl2 ms-u-xlPush2">
                <i class="ms-Icon ms-Icon--x" onclick="toggleBanner()"></i>
            </div>
        </div>
    </div>

    <div id="mini-banner" class="custom-mini-banner hidden">
        <div class="ms-Grid">
            <div class="ms-Grid-row" style="padding:0px 10px 20px 0px;">
                <div class="ms-Grid-col ms-u-sm6 ms-u-smPush3  ms-u-md4 ms-u-mdPush4  ms-u-lg8 ms-u-lgPush2 ms-u-xl6 ms-u-xlPush3">
                    <div class="mini-banner-label ms-fontWeight-semibold">
                        What is the Office Self Service Deployment?
                    </div>
                    <div class="mini-banner-toggle ms-font-m-plus" onclick="toggleBanner()" >
                         Learn more about this tool for administrators
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="productModal" class="custom-Dialog" tabindex="1" style="width: 100%;">
        <div id="productContainer" class="ms-Grid custom-Dialog-main" style="width: 98%;">
            <div id="searchBar" class="ms-Grid-row">
                <div class="ms-Grid-col ms-u-sm12">
                    <div class="ms-Grid -header custom-header">
                        <div class="ms-Grid-row">
                            <div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg3 ms-u-xl2">
                                <p class="ms-font-xl">Select a Package</p>
                            </div>
                            <div class="ms-Grid-col ms-u-sm12 ms-u-md4 ms-u-mdPush0 ms-u-lg3 ms-u-lgPush0 ms-u-xl4">
                                <div id="outerSearchBox" class="ms-SearchBox ms-SearchBox-field custom-SearchBox">
                                </div>
                            </div>
                            <div class="ms-Grid-col ms-u-sm12 ms-u-md4 ms-u-mdPush0 ms-u-lg3 ms-u-lgPush0 ms-u-xl3">
                                <div class="ms-Dropdown">
                                    <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                    <select id="ddl-Location" class="ms-Dropdown-select"></select>
                                </div>
                            </div>
                            <div class="ms-Grid-col ms-u-sm12  ms-u-md4 ms-u-mdPush0 ms-u-lg3 ms-u-lgPush0 ms-u-xl2">
                                <div class="display-controls">
                                    <div id="listViewToggle" class="display-control-outer" onclick="isListView()">
                                        <i class="ms-Icon ms-Icon--listBullets  display-control-icon"></i>
                                    </div>
                                    <div id="tileViewToggle" class="display-control-outer" onclick="isTileView()">
                                        <i class="ms-Icon ms-Icon--tile display-control-icon"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="productList" class="ms-Grid-inner custom-Dialog-inner" style="overflow-y: auto; overflow-x: auto; width: 100%;">
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-u-sm12">

                    </div>
                </div>

                <div id="buildsGrid" class="ms-Grid-row">
                    @*BUILDS GO HERE*@
                </div>

                <div id="buildsTable" class="ms-Table" style="font-weight: bold; width: 90%">
                    @*BUILDS GO HERE*@
                </div>
            </div>
        </div>
    </div>

    <div id="primaryLanguageModal" class="custom-Dialog hidden" tabindex="1" style="width: 100%;">
        <div class="custom-Dialog-main" style="width: 98%;">
            <button id="languagePrimaryBack" class="-button custom-back-button" onclick="showModal('productModal')">
                <img class="ms-Icon ms-Icon--x" src="~/Content/imgs/Custom-Back-Arrow.png" />
                <span class="ms-font-l ms-fontWeight-regular">Back</span>
            </button>
            <div id="languagePrimaryTitle" class="-header">
                <p class="-title ms-font-xl">Select A Primary Language</p>
                <hr />
            </div>
            <div id="primaryLanguageList" class="-inner custom-Dialog-inner"  style="overflow-y: auto; overflow-x: auto; width: 100%;">
                <div id="primaryLanguagesGrid" class="ms-Grid ms-ChoiceFieldGroup">

                </div>
                <div class="-actions custom-Dialog-actions">
                    <div class="languagesContinue">
                        <button id="languageButton" class="-action ms-Button ms-Button--primary languages-button" onclick="setPrimaryLanguage()" disabled>
                            <span class="ms-Button-label">Continue</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="languageModal" class="custom-Dialog hidden" tabindex="1" style="width: 100%;">
        <div class="custom-Dialog-main" style="width: 98%;">
            <button class="-button custom-back-button" onclick="showModal('primaryLanguageModal')">
                <img class="ms-Icon ms-Icon--x" src="~/Content/imgs/Custom-Back-Arrow.png" />
                <span class="ms-font-l ms-fontWeight-regular">Back</span>
            </button>
            <div class="-header">
                <p class="-title ms-font-xl">Select Additional Languages</p>
                <hr />
            </div>
            <div class="-inner custom-Dialog-inner">
                @*<div class="ms-Grid">*@
                <div id="languagesGrid" class="ms-Grid languagesGrid">

                </div>
                @*</div>*@
                <div class="-actions custom-Dialog-actions">
                    <div class="languagesContinue">
                        <button id="languageButton2" class="-action ms-Button ms-Button--primary languages-button" onclick="setLanguage()">
                            <span class="ms-Button-label">Continue</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="confirmationModal" class="custom-Dialog hidden" tabindex="1">

        <div class="custom-Dialog-main">
            <button class="-button custom-back-button" onclick="showModal('languageModal')">
                <img class="ms-Icon ms-Icon--x" src="~/Content/imgs/Custom-Back-Arrow.png" />
                <span class="ms-font-l ms-fontWeight-regular">Back</span>
            </button>
            <div class="-header">
                <p class="-title ms-font-xl">Lets make sure you're getting what you need...</p>
                <hr />
            </div>
            <div class="ms-Grid -inner confirmation-Dialog-inner">
                <div id="errorMessage" class="ms-Dialog ms-Dialog--lgHeader hidden">
                    <div class="ms-Overlay"></div>
                    <div class="ms-Dialog-main">
                        <div class="ms-Dialog-header">
                            <div class="ms-Dialog-title ms-font-xl-plus">
                                <i class="ms-Icon ms-Icon--x close-dialog" onclick="closeDialog()"></i>
                                Something went wrong...
                            </div>
                        </div>
                        <div class="ms-Dialog-inner">
                            <div id="errorText" class="ms-Dialog-content ms-font-l">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-u-sm8 ms-u-smPush1 ms-u-md8 ms-u-mdPush3 ms-u-lg10  ms-u-lgPush2 ms-u-xl8 ms-u-xlPush4">
                        <p class="ms-font-m-plus">
                            Here's what you are about to download. If this is correct please click the <b>Install</b> button to proceed downloading
                        </p>
                    </div>
                </div>
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-u-sm12 ms-u-smPush0 ms-u-md12 ms-u-mdPush1 ms-u-lg12 ms-u-lgPush1 ms-u-xl10 ms-u-xlPush2">
                        <div class="confirmation-information">
                            <div class="ms-Grid-row">
                                <div class="ms-Grid-col ms-u-sm3 ms-u-smPush1 ms-u-md2 ms-u-mdPush1 ms-u-xl2confirmationField">
                                    <p class="ms-font-l">Office Version:</p>
                                </div>
                                <div class="ms-Grid-col ms-u-sm4 ms-u-smPush1  ms-u-md3 ms-u-mdPush2 ms-u-xl2 ms-u-xlPush1 confirmationField">
                                    <p id="versionSpan" class="ms-font-l"></p>
                                </div>
                            </div>
                            <div class="ms-Grid-row" style="display: none;">
                                <div class="ms-Grid-col  ms-u-sm3 ms-u-smPush1  ms-u-md2 ms-u-mdPush1 confirmationField">
                                    <p class="ms-font-l">Product Package:</p>
                                </div>
                                <div class="ms-Grid-col ms-u-sm4 ms-u-smPush2  ms-u-md3 ms-u-mdPush2 ms-u-xl2 ms-u-xlPush1 confirmationField">
                                    <p id="productSpan" class="ms-font-l"></p>
                                </div>
                            </div>
                            <div class="ms-Grid-row">
                                <div class="ms-Grid-col  ms-u-sm3 ms-u-smPush1 ms-u-md2 ms-u-mdPush1 confirmationField">
                                    <p class="ms-font-l">Languages:</p>
                                </div>
                                <div class="ms-Grid-col  ms-u-sm6 ms-u-smPush3 ms-u-md7 ms-u-mdPush2 ms-u-lg8 ms-u-lgPush1 ms-u-xl8 ms-u-xlPush1">
                                    <p id="languageSpan" class="ms-font-l">

                                    </p>
                                </div>
                            </div>
                            <div class="-actions confirmationActions">
                                <div>
                                    <button id="installOffice" class="-action ms-Button ms-Button--primary" onclick="generateXML()">
                                        <span class="ms-Button-label">Install</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="downloadModal" class="custom-Dialog hidden" tabindex="1">

        <div class="custom-Dialog-main">
            <button class="-button custom-back-button" onclick="showModal('confirmationModal')">
                <img class="ms-Icon ms-Icon--x" src="~/Content/imgs/Custom-Back-Arrow.png" />
                <span class="ms-font-l ms-fontWeight-regular">Back</span>
            </button>
            <div class="-header">
                <p class="-title ms-font-xl">You're all set! Your download will begin shortly...</p>
                <hr />
            </div>
            <div class="-inner custom-Dialog-inner">
                <p class="ms-font-l">
                    If your download doesn't start after 10 seconds please download Office <a id="directDL"></a> .
                </p>
            </div>
        </div>
    </div>

    <div id="helpModal" class="custom-Dialog hidden" tabindex="1">

        @Html.Partial("~/Views/SHared/_help.cshtml")
    </div>

    <script type="text/javascript" src="./Scripts/vkbeautify.0.99.00.beta.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
    <script src="//code.jquery.com/jquery-2.1.4.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>

